<template>
  <div
    class="wrapper scrollbar-slinder"
    ref="wrapper"
    id="wrapper"
    @scroll="onScroll"
  >
    <div class="background" :style="{ height: `${total_height}px` }"></div>
    <div class="list" ref="containerBox">
      <div
        class="scroll-box-item one hover-active pointer text-normal"
        style="line-height: 30px; padding: 2px 8px"
        :title="item.name"
        v-for="(item, index) in runList"
        :key="index"
        @click="$emit('toLines', item)"
      >
        <i class="el-icon-link" :style="`color:${iconColor}`"></i>
        {{ item.name }}
      </div>
      <div
        v-if="runList.length == 0"
        class="text-center text-2"
        style="padding: 20px 0; color: #c1c1c1"
      >
        当前高度范围暂无数据,请尝试拖拽地图!
      </div>
      <!-- <div
        v-for="item in runList"
        :class="['scroll-box-item', 'one']"
        :key="item.index"
      >
        <slot />
      </div> -->
    </div>
  </div>
</template>

<script>
export default {
  props: {
    cache_screens: {
      // 缓冲的屏幕数量
      type: Number,
      default: 1,
    },
    dataList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    iconColor: {
      type: String,
      default: "rgb(53, 255, 255)",
    },
  },
  data() {
    return {
      list: [], // 源数据
      runList: [], // 运行时的列表
      total_height: 0, // 列表总高度
      maxNum: 0, // 一屏幕容纳的最大数量
      distance: 0, // 存储滚动的距离
    };
  },
  watch: {
    dataList(n) {
      if (n.length) {
        this.$refs.wrapper.scrollTop = 0;
        this.genData();
        this.init();
        this.getRunData(0);
      } else {
        this.$refs.wrapper.scrollTop = 0;
        this.genData();
        this.init();
        this.runList = [];
      }
    },
  },
  mounted() {
    this.genData();
    this.init();
    this.getRunData();
  },
  methods: {
    getClass(type) {
      switch (type) {
        case 1:
          return "one";
        case 2:
          return "two";
        case 3:
          return "three";
        default:
          return "";
      }
    },
    init() {
      const containerHeight = parseInt(
        getComputedStyle(this.$refs.wrapper).height
      );
      //一屏的最大数量
      this.maxNum = Math.ceil(containerHeight / this.min_height);
      //   console.log(`maxNum:${this.maxNum}`);
    },
    onScroll(e) {
      if (this.ticking) {
        return;
      }
      this.ticking = true;
      requestAnimationFrame(() => {
        this.ticking = false;
      });
      const distance = e.target.scrollTop;
      this.distance = distance;
      this.getRunData(distance);
    },
    //二分法计算起始索引
    getStartIndex(scrollTop) {
      let start = 0,
        end = this.list.length - 1;
      while (start < end) {
        const mid = Math.floor((start + end) / 2);
        const { top, height } = this.list[mid];
        if (scrollTop >= top && scrollTop < top + height) {
          start = mid;
          break;
        } else if (scrollTop >= top + height) {
          start = mid + 1;
        } else if (scrollTop < top) {
          end = mid - 1;
        }
      }
      return start;
    },
    getRunData(distance = null) {
      //滚动的总距离
      const scrollTop = distance ? distance : this.$refs.containerBox.scrollTop;

      //在哪个范围内不执行滚动
      if (this.scroll_scale) {
        if (
          scrollTop > this.scroll_scale[0] &&
          scrollTop < this.scroll_scale[1]
        ) {
          return;
        }
      }
      //起始索引
      let start_index = this.getStartIndex(scrollTop);
      start_index = start_index < 0 ? 0 : start_index;

      //上屏索引
      let upper_start_index = start_index - this.maxNum * this.cache_screens;
      upper_start_index = upper_start_index < 0 ? 0 : upper_start_index;

      // 调整offset
      this.$refs.containerBox.style.transform = `translate3d(0,${this.list[upper_start_index].top}px,0)`;

      //中间屏幕的元素
      const mid_list = this.list.slice(start_index, start_index + this.maxNum);

      // 上屏
      const upper_list = this.list.slice(upper_start_index, start_index);

      // 下屏元素
      let down_start_index = start_index + this.maxNum;

      down_start_index =
        down_start_index > this.list.length - 1
          ? this.list.length
          : down_start_index;

      if (this.list.length < this.maxNum) {
        this.runList = this.list;
        return;
      }

      this.scroll_scale = [
        this.list[Math.floor(upper_start_index + this.maxNum / 2)].top,
        this.list[Math.ceil(start_index + this.maxNum / 2)].top,
      ];

      const down_list = this.list.slice(
        down_start_index,
        down_start_index + this.maxNum * this.cache_screens
      );

      this.runList = [...upper_list, ...mid_list, ...down_list];
    },
    //生成数据
    genData() {
      function getHeight(type) {
        switch (type) {
          case 1:
            return 34;
          case 2:
            return 100;
          case 3:
            return 150;
          default:
            return "";
        }
      }
      let total_height = 0;
      let datas = JSON.parse(JSON.stringify(this.dataList));
      const list = datas.map((data, index) => {
        const height = getHeight(1);
        const ob = {
          index,
          height,
          top: total_height,
          ...data,
        };
        total_height += height;
        return ob;
      });
      this.total_height = total_height; //  列表总高度
      this.list = list;
      this.min_height = 34; // 最小高度是34
    },
  },
};
</script>
<style lang="scss" scoped>
.wrapper {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 60px;
  overflow-y: scroll;
  .background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: -1;
  }
  .list {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }
}
.scroll-box-item {
  box-sizing: border-box;
  .item {
    height: 100%;
    line-height: 40px;
    color: #999;
    &.lt {
      margin-left: 10px;
    }
    &.gt {
      margin-right: 10px;
    }
  }
  &.one {
    height: 34px;
  }
  &.two {
    height: 100px;
    .item {
      color: #666;
    }
  }
  &.three {
    height: 150px;
    .item {
      color: #005aa0;
    }
    .img-container {
      display: flex;
      align-items: center;
      img {
        width: 100px;
        height: 100px;
        margin-right: 10px;
      }
    }
  }
}
</style>
